<template>
	<view class="order_detail_box">
		<view class="order_title">
			<view class="title">
				{{orderRefundStatus}}
			</view>
			<view class="pic_title">
				<view class="title">
					¥{{details.refundAmount||0}}
				</view>
				<view v-if="details.refundStatus==3" class="tips" @click="handleMakeCall(details.contactPhone)">
					联系商家
				</view>
				<view class="tips" v-if="details.refundStatus==1">
					已退回钱包
				</view>
			</view>
		</view>
		<u-gap height="14" bg-color="#ECECEC"></u-gap>
		<GoodsItem :isAfterSaleBtn='false' @handleReceiving='handleReceiving' @handlePay='handlePay'
			@handlecancel='handlecancel' :item='details'></GoodsItem>
		<u-gap height="14" bg-color="#ECECEC"></u-gap>
		<view class="msg_box">
			<OrderMsg title='订单编号' :value='details.orderCode||"暂无"' :isColpy="true"></OrderMsg>
			<OrderMsg title='申请金额' :value='details.refundAmount||"0"'></OrderMsg>
			<OrderMsg title='退款原因' :value='details.applyReason'></OrderMsg>
			<OrderMsg title='退款类型' :value='details.applyType'></OrderMsg>
			<OrderMsg title='退款说明' :value='details.applyInstructions'></OrderMsg>
			<OrderMsg title='申请时间' :value='$u.timeFormat(details.createTime , "yyyy年mm月dd日 hh时MM分")'></OrderMsg>
		</view>

	</view>
</template>

<script>
	import GoodsItem from '@/pages/order/components/OrderGoodsItem-2.vue'
	import OrderMsg from '@/pages/order/components/OrderMsg.vue'
	import GoodsItemRow from '@/components/ZY-Goods-item-row/ZY-Goods-item.vue'
	import ZYTitle from '@/components/ZY-title/ZY-title.vue'
	export default {
		components: {
			GoodsItemRow,
			ZYTitle,
			GoodsItem,
			OrderMsg
		},
		computed: {
			payType() {
				switch (this.details.payType) {
					case 1:
						return '微信'
						break;
					case 2:
						return '支付宝'
						break;
					case 3:
						return '余额支付'
						break;
					default:
						break;
				}
			},
			orderRefundStatus() {
				// 退款状态 1退款成功 2退款中 3退款失败
				switch (this.details.refundStatus) {
					case 1:
						return '退款完成'
						break;
					case 2:
						return '已通知商家正在处理...'
						break;
					case 3:
						return '退款失败'
						break;
					default:
						break;
				}
			},

		},
		data() {
			return {
				id: '',
				details: {},
				userInfo: {}
			};
		},
		onLoad(e) {
			this.id = e.id
			this.init()
		},
		methods: {
			handleMakeCall(call) {

			},
			handleReceiving(item) {
				const that = this
				uni.showModal({
					title: '提示',
					content: '确认您的订单已完成',
					success(res) {
						if (res.confirm) {
							that.$u.api.confirmReceipt({
								id: item.id
							}).then(res => {
								uni.showToast({
									title: '确认收货成功',

									icon: 'none'
								})
								uni.navigateTo({
									url: '/pages/order/order'
								})
							})
						}

					}
				})
			},
			handlecancel(row) {
				const that = this
				uni.showModal({
					title: '提示',
					content: '确认取消吗?',


					success() {
						that.$u.api.cancellationOrder({
							id: row.id
						}).then(res => {
							if (res.confirm) {
								uni.showToast({
									title: '取消成功',
									icon: 'none'
								})
								uni.navigateTo({
									url: '/pages/order/order'
								})
							}

						})
					}
				})
			},
			handlePay(item) {

				uni.navigateTo({
					url: '/pages/payPages/payPages?order=' + JSON.stringify(item)
				})

			},
			init() {
				this.$u.api.getAfterSalesOrderInfo({
					id: this.id
				}).then(res => {
					console.log(res, '订单详情')
					this.details = res
				})
			},
			handNavToDetails(item) {
				uni.navigateTo({
					url: '/pages/followShop/goodsDetail/goodsDetail?id=' + item.id,

				})
			},
			handNavTo() {
				uni.navigateTo({
					url: '/pages/logistics/logistics'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order_detail_box {
		.order_title {
			padding: 30rpx;

			.pic_title {
				display: flex;
				align-items: center;
				// margin-bottom: 28rpx;
				margin-top: 28rpx;

				.tips {
					margin-left: 20rpx;
					color: $u-type-primary;
				}

				.title {
					font-weight: 600;
					font-size: 32rpx;
					color: #000000;
				}

			}

			.title {
				font-weight: 600;
				font-size: 38rpx;
				color: #000000;
			}
		}

		.item_row {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		.msg_box {
			padding: 24rpx;
		}


		.explain {
			display: flex;
			flex-direction: column;
			padding: 24rpx;

			.exp_title {

				font-size: 28rpx;
				color: #000000;
			}

			.exp_summary {
				margin-top: 12rpx;
				color: #828282;
				font-size: 24rpx;

			}
		}

		.logistics_box {
			display: flex;
			align-items: center;
			padding: 24rpx;

			.icon {
				width: 60rpx;
				height: 46rpx;
				margin-right: 13rpx;
			}

			.logistics_title {
				.time {
					color: #A8A8A8;
					font-size: 24rpx;
				}

				.title {
					@include ellipsisMultiline(1);
					color: $u-type-primary;
					font-size: 28rpx;
					margin-bottom: 4rpx;

				}

			}

		}
	}
</style>
